<template>
  <div class="hotelDetail">
        <el-breadcrumb separator=">" >
            <el-breadcrumb-item :to="{ path: '/hotel' }">酒店</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/hotel', query:{cityName : hotelData.city.name}}" >{{hotelData.real_city}}酒店预定</el-breadcrumb-item>
            <el-breadcrumb-item>{{hotelData.name}}</el-breadcrumb-item>
        </el-breadcrumb>

         <div class="hotelDetail-header">
            <h1>{{hotelData.name}}</h1>
            <h5>{{hotelData.alias}}</h5>
            <div class="hotelDetail-header-location">
                <i class="el-icon-location"></i>
                <span>位于: {{hotelData.address}}</span>
            </div>
        </div>

       <div class="hotelDetail-img">
           <el-row type="flex" :gutter="30">
               <el-col :span="13" class="left-img">
                   <img :src="hotelData.photos" alt="">
               </el-col>
               <el-col :span="11" class="right-img">
                    <el-row type="flex" :gutter="15">
                        <el-col :span="12"><img :src="hotelData.photos" alt=""></el-col>
                        <el-col :span="12"><img :src="hotelData.photos" alt=""></el-col>
                    </el-row>
                    <el-row type="flex" :gutter="15">
                        <el-col :span="12"> <img :src="hotelData.photos" alt=""></el-col>
                        <el-col :span="12"><img :src="hotelData.photos" alt=""></el-col>
                    </el-row>
                    <el-row type="flex" :gutter="15">
                        <el-col :span="12"><img :src="hotelData.photos" alt=""></el-col>
                        <el-col :span="12"><img :src="hotelData.photos" alt=""></el-col>
                    </el-row>
               </el-col>
           </el-row>
        </div>

        <div class="hotelDetail-mes">
             <p>
                 <span>价格来源</span>
                 <span>低价房型</span>
                 <span>最低价格(元/晚)</span>
             </p>
             <p v-for="(item, index) in hotelData.products" :key="index">
                 <span>{{item.name}}</span>
                 <span>{{item.bestType}}</span>
                 <span class="price">￥{{item.price}}起 &gt;</span>
             </p>
         </div>
         <div class="hotelDetail-map-wrap">
             <Amap :isIndex="isIndex" :loc="loc"/>
         </div>
         <div class="hotelDetail-services">
             <p>
                 <span>基本信息</span>
                 <span >入住时间: 14:00之后</span>
                 <span >离店时间: 12:00之前</span>
                 <span >{{hotelData.creation_time}}</span>
                 <span>酒店规模：{{hotelData.num_collected}}间客房</span>
             </p>
             <p>
                 <span> 主要设施</span>
                 <el-tag v-for="(item ,index) in hotelData.hotelassets" :key="index" type="info" >{{item.name}}</el-tag>
             </p>
             <p>
                 <span>停车服务</span>
                 <span>{{hotelData.parking === null ? '无': '有'}}</span>
             </p>
             <p>
                 <span>品牌信息</span>
                 <span v-if="hotelData.hotelbrand !== null">{{hotelData.hotelbrand.name}}</span>
             </p>
         </div>

          <div class="hotelDetail-comment">
             <h1>{{hotelData.all_remarks}}条真实用户评论</h1>
             <el-row>
                 <el-col>总评数：{{hotelData.all_remarks}}</el-col>
                 <el-col>好评数：{{hotelData.good_remarks}}</el-col>
                 <el-col>差评数：{{hotelData.bad_remarks}}</el-col>
             </el-row>
             <div class="hotelDetail-comment-rate">
                 <div class="left-rate" v-if="value > 3">
                        <el-rate
                            v-model="value"
                            disabled
                            show-score
                            text-color="#ff9900"
                            score-template="{value}">
                        </el-rate>
                        <div class="circle1">
                            <span>推荐</span>
                        </div>
                 </div>
                 <div class="circle" v-if="hotelData.scores">
                     <span>环境</span>
                     <span>{{hotelData.scores.environment}}</span>
                 </div>
                 <div class="circle" >
                     <span>产品</span>
                     <span>{{hotelData.scores.product}}</span>
                 </div>
                 <div class="circle" >
                     <span>服务</span>
                     <span>{{hotelData.scores.service}}</span>
                 </div>
             </div>
         </div>
  </div>
</template>

<script>
import Amap from '../../components/hotel/Amap'
export default {
  name: '',
  components: {
    // eslint-disable-next-line vue/no-unused-components
    Amap
  },
  data () {
    return {
      hotelData: {
        city: {
          name: ''
        },
        hotelbrand: {
          name: ''
        },
        hotelassets: [],
        scores: {
          environment: 0,
          product: 0,
          service: 0
        }
      },
      value: 0,
      loc: [
      ],
      isIndex: 2
    }
  },
  methods: {
    getHotelData () {
      this.$http.get('/hotels', {
        params: { id: this.$route.query.id }
      }).then(res => {
        const { data } = res.data
        console.log(data)
        this.hotelData = data[0]
        this.value = data[0].stars
        this.loc.push(data[0].location)
      })
    }
  },
  mounted () {
    setTimeout(() => {
      this.getHotelData()
    }, 500)
  }
}
</script>

<style lang="less" scoped>
.hotelDetail{
    padding: 20px 0;
    width: 1000px;
    margin: 0 auto;
    .hotelDetail-header{
        padding: 10px 0;
        margin: 10px 0;
        h1{
            font-size: 25px;
        }
        h5{
            font-size: 13px;
            color: gray;
        }
        .hotelDetail-header-location{
            font-size: 13px;
        }
    }
    .hotelDetail-img{
        width: 100%;
        height: 360px;
        .left-img{
            width: 640px;
            height: 360px;
            img{
                width: 100%;
                height: 360px;
            }
        }
        .right-img{
            width: 360px;
            margin-bottom: 10px;
            .el-col{
                margin-bottom: 15px;
            }
            img{
                width: 160px;
                height: 110px;
            }
        }
    }
    .hotelDetail-mes{
        margin: 10px auto;
        padding: 10px 0;
        width: 95%;
        p:nth-of-type(1){
            width: 100%;
            border-bottom: 1px #eee solid;
            height: 49px;
            line-height: 49px;
            span{
                display: inline-block;
                width: 33.3333%;
                font-size: 14px;
                color: gray;
            }
            &:hover{
                background-color:#fff;
            }
        }
        p{
           width: 100%;
            border-bottom: 1px #eee solid;
            height: 49px;
            line-height: 49px;
            span{
                display: inline-block;
                width: 33.3333%;
                font-size: 14px;
                color: gray;
            }
            .price{
                color: orange;
            }
            &:hover{
                background-color:#eee;
            }
        }
    }
    .hotelDetail-map-wrap{
        width: 1000px;
        margin: 20px 0;
        height: 360px;
    }

    .hotelDetail-services{
        margin: 10px auto ;
        padding: 10px 0;
        width: 95%;
        p{
            width: 100%;
            height: 49px;
            border-bottom: 1px solid #eee;
            line-height: 49px;
            span:nth-of-type(1){
                font-size: 14px;
                color: #000;
            }
            .el-tag{
                width: auto;
                text-align: center;
            }
        }
        p{
            span{
                display: inline-block;
                font-size: 14px;
                width: 20%;
                color: gray;
            }
        }
    }
    .hotelDetail-comment{
        margin-top: 30px;
        padding: 10px 0;
        position: relative;
        h1{
            font-weight: bold;
        }
        .el-row{
            margin-top: 10px;
            .el-col{
                height: 25px;
                font-size: 15px;
            }
        }
        .hotelDetail-comment-rate{
            position: absolute;
            left: 200px;
            top: 30px;
            width: 800px;
            height: 100px;
            display: flex;
            align-items: center;
            .left-rate{
                position: relative;
                width: 18%;
                height: 100%;
                .el-rate{
                    position: absolute;
                    top: 50%;
                    transform: translate3d(0,-50%,0);
                }
                .circle1{
                    position: absolute;
                    top: 50%;
                    left: -40px;
                    transform: translate3d(0,-50%,0) rotate(-30deg);
                    font-size: x-large;
                    opacity: 0.25;
                }
            }
            .circle1,
            .circle{
                margin-left: 80px;
                width: 70px;
                height: 70px;
                border: 2px orange solid;
                border-radius: 50%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                color: orange;
            }
        }
    }
}
</style>
